<template>
  <div class="trave-map">
    <div id="main"></div>
  </div>
</template>
<script>
import geoJson from "@/assets/data.json";
import { travel } from "@/api/api";
import map from '@/utils/map.js'
import * as echarts from 'echarts'
import { onMounted  } from 'vue'
export default {
  setup(){
    const drawMap = function(points, linesData) {
      let myChart = echarts.init(document.getElementById("main"));
      echarts.registerMap("china", geoJson); // 注册可用的地图,必须包括geo组件或者map图表类型的时候才可以使用

      // 关于地图的散点配置
      let pointsObj = {
        type: "effectScatter", //散点图
        coordinateSystem: "geo",
        // 绘制完成显示
        showEffectOn: "render",
        symbolSize: 10, //散点大小
        // 层级 在底图之上
        zlevel: 1,
        data: points,
        rippleEffect: {
          // 涟漪特效相关配置
          period: 15,  //动画总共秒数
          scale: 4,
          brushType: "fill", //波纹配置方式
        },
      }
      //   关于地图中线路动画效果设置
      let lineObj = {
            type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 4,
                symbol: 'arrow',//箭头
                symbolSize: 7,
                trailLength: 0.4 //拖尾
            },
            lineStyle: {
                normal: {
                    color: '#1DE9B6',
                    width: 1,
                    opacity: 0.1,
                    curveness: 0.3 //弯曲程度
                }
            },
            data: linesData
      }

      map.series[1] = pointsObj
      map.series[2] = lineObj
      let option = map
      myChart.setOption(option);
    }
    onMounted(
      travel().then((res) => {
      if (res.data.status === 200) {
        let { points, linesData } = res.data.data;
        drawMap(points, linesData);
      }
    })
    )
  },
};
</script>
<style lang="scss">
.trave-map {
  width: 100%;
  #main {
    width: 100%;
    height: 600px;
  }
}
</style>